<template>
  <div class="hot-history">
    <h-ccard>
      <h-query
        :showKey="['startTime,endTime']"
        :query="query"
        format="YYYY-MM-DD HH:mm:ss"
        :showTime="{ format: 'HH:mm:ss' }"
        @search="search">
        <!-- <h-tooltip slot="btn" title="热词的统计图，需要加这个时间筛选吗，目前是没有的" /> -->
      </h-query>

      <div style="height: 480px;margin-top: 60px;position: relative;">
        <div class="time-tab">
          <a-radio-group buttonStyle="solid" v-model="type" @change="change">
            <a-radio-button value="0">全部</a-radio-button>
            <a-radio-button value="1">本周</a-radio-button>
            <a-radio-button value="2">本月</a-radio-button>
          </a-radio-group>
        </div>
        <Bar v-if="refresh" ref="bar" :data="data" />
      </div>
    </h-ccard>
    <div style="margin-left: -10px;margin-right: -10px">
      <a-row :gutter="[20, 20]" style="margin-top: 30px;">
        <a-col :span="6" v-for="item in hotData" :key="item.id">
          <h-ccard :showHeader="true" style="height: 700px;">
            <span class="hot-right" slot="right">{{ item.key }}</span>
            <a-empty size="large" class="a-empty-card" v-if="!item.children.length"></a-empty>
            <h-list style="margin-top: 40px" v-else type="hot" :data="item.children" @detail="toLink"></h-list>
          </h-ccard>
        </a-col>
        <!-- <a-col :span="6">
          <h-ccard :showHeader="true" style="height: 850px;">
            <span class="hot-right" slot="right">00:00:00-05:59:59</span>
            <a-spin size="large" class="a-spin-card" v-if="!hotData.length"></a-spin>
            <h-list style="margin-top: 40px" v-else type="hot" :data="hotData"></h-list>
          </h-ccard>
        </a-col>
        <a-col :span="6">
          <h-ccard :showHeader="true" style="height: 850px;">
            <span class="hot-right" slot="right">00:00:00-05:59:59</span>
            <a-spin size="large" class="a-spin-card" v-if="!hotData.length"></a-spin>
            <h-list style="margin-top: 40px" v-else type="hot" :data="hotData"></h-list>
          </h-ccard>
        </a-col>
        <a-col :span="6">
          <h-ccard :showHeader="true" style="height: 850px;">
            <span class="hot-right" slot="right">00:00:00-05:59:59</span>
            <a-spin size="large" class="a-spin-card" v-if="!hotData.length"></a-spin>
            <h-list style="margin-top: 40px" v-else type="hot" :data="hotData"></h-list>
          </h-ccard>
        </a-col> -->
      </a-row>
    </div>
  </div>
</template>

<script>
import { historyhotList, wordHotList, wordHotListWeek, wordHotListMonth } from '@/api/serve';
import Bar from './Charts/Bar/Index';
import moment from 'moment';

export default {
  components: {
    Bar
  },
  inject: ['toDetail'],
  data() {
    return {
      moment,
      type: '0',
      hotData: [],
      refresh: false,
      data: [],
      defaultValueDate: {
        value: moment().format('YYYY-MM-DD')
      },
      query: [
        // {
        //   key: 'day',
        //   type: 'date',
        //   label: '选择时间'
        // }
      ]
    };
  },
  created() {
    this.getHotList();

    this.getBarData();
  },
  methods: {
    reload() {
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
    },
    search(params) {
      const { startTime: start, endTime: end } = params;
      console.log(params);
      // this.getHotList({ start, end });
      this.getBarData({ start, end });
      this.defaultValueDate.value = params.day;
    },
    async getBarData(params) {
      const res = await wordHotList(params || undefined);
      this.data = res.data.records.map(e => {
        return {
          name: e.hotWorld,
          value: e.num
        };
      });
      this.reload();
    },
    async getwordHotListWeek() {
      const res = await wordHotListWeek();
      this.data = res.data.records.map(e => {
        return {
          name: e.hotWorld,
          value: e.num
        };
      });
      this.reload();
    },
    async getwordHotListMonth() {
      const res = await wordHotListMonth();
      this.data = res.data.records.map(e => {
        return {
          name: e.hotWorld,
          value: e.num
        };
      });
      this.reload();
    },
    change(e) {
      if (e.target.value == 0) {
        this.getBarData();
      }
      if (e.target.value == 1) {
        this.getwordHotListWeek();
      }
      if (e.target.value == 2) {
        this.getwordHotListMonth();
      }
    },
    toLink({ link }) {
      window.open(link);
    },
    getHotList(time) {
      // const keyList = {
      //   '0': '00:00:00~05:59:59',
      //   '1': '06:00:00~11:59:59',
      //   '2': '12:00:00~17:59:59',
      //   '3': '18:00:00~23:59:59'
      // };
      this.hotData = [];
      historyhotList({
        day: moment().format('YYYY-MM-DD')
      }).then(res => {
        delete res.data;
        const key = Object.keys(res).filter(e => {
          return e.includes('~');
        });
        const value = Object.values(res);
        const list = value.filter(e => e instanceof Array);
        list.forEach((e, i) => {
          const obj = {
            children: e.map((m, j) => {
              return {
                ...m,
                source: `数据来源：${m.source}`,
                createTime: `获取时间：${moment(m.createTime).format('MM/DD HH:mm')}`,
                order: j + 1,
                hotNum: m.hotNumber
              };
            }),
            key: key[i]
          };
          this.hotData.push(obj);
        });

        this.hotData.sort(function(a, b) {
          return a.key.substring(0, 2).replace(/:/, '') - b.key.substring(0, 2).replace(/:/, '');
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.hot-history {
  .time-tab {
    position: absolute;
    right: 80px;
    top: 0;
    z-index: 222;
  }
  .hot-right {

  }
}
</style>
